<template>
	<view class="bg-white flex flex-direction" style="width: 100vw;height: 100vh;">
			<cu-custom bgColor="bg-white" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">
					<text>课程</text>
				</block>
			</cu-custom>
			<!-- 专栏组件 -->
			<column :columnType="2" class="flex-sub flex  flex-direction" :tablist="tablist" ref="column" @change="handleChange" id="cont">
				<!-- 轮播展示 -->
				<swiper class="margin flex-sub" @change="onSwiperchange" :current="current" style="touch-action: none;">
					<swiper-item v-for="(item,num) in tablist" :key="num" style="touch-action: none;">
						<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="loadMoreData">
							<view v-for="(course,index) in courseList" :key="index" class="margin-top" @click="$Router.push({name:'courseDetail',params:{id:course.id}})">
								<!-- 展示列表 -->
								<singlecell :books="course"></singlecell>
							</view>
							<load-more :status="item.loadMoreStatus"></load-more>
						</scroll-view>
					</swiper-item>
				</swiper>
			</column>
	</view>
</template>

<script>
	import column from '../../components/column/column.vue'
	import singlecell from '../../components/column/singlecell.vue'
	import loadMore from '../../components/mine/loadMore.vue';
	export default {
		components: {
			column,
			singlecell,
			loadMore
		},
		data() {
			return {
				page: 1,
				current: 0,
				tablist: [],
				courseList:[] 
			}
		},
		onLoad() {
            this.$http.get('/edu/onesubject/getAllOneSubject').then(res =>{
				this.tablist=res.data.result
				this.tablist.forEach(item =>{
					item.loadMoreStatus=0
					item.id="a"+item.id
				})
				// console.log(this.tablist)
			})
			this.$http.get('/edu/course/getRecommendCourse').then((res)=>{
				// console.log(res)
				this.courseList=res.data.result
			})
		},
		methods: {
			loadMoreData() {
				this.tablist[this.current].loadMoreStatus = 1;
				// 更改加载页数
				this.page++;

				if (this.courseList.length < 15) {
					this.courseList = this.courseList.concat(this.courseList);
					this.tablist[this.current].loadMoreStatus = 0;
				} else {
					this.tablist[this.current].loadMoreStatus = 2;
					this.$forceUpdate()
				}
			},
			onSwiperchange(e) {
				this.$refs.column.switchtab(e.detail.current)
				this.current = e.detail.current
				this.tablist[this.current].loadMoreStatus = 0;
			},
			handleChange(index) {
				this.current = index
				this.tablist[this.current].loadMoreStatus = 0;
			}
		}
	}
</script>

<style>
</style>
